<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 
<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />
		<title>首页</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/wap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/wap/css/public.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/wap/css/font-awesome.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/wap/css/swiper.min.css" />
      	</head>
</head>
<body>
		<!-- logo和search -->
		<div class="tb-logo">
	    	<span class="float-l pic"><a href="${pageContext.request.contextPath }/wap/index.html"><img 
	    		  src="${pageContext.request.contextPath }/resources/wap/img/logo.png" 
	    		  alt="" /></a></span>
	    	<div class="tb-srch">
					<form action="${pageContext.request.contextPath }/wap/search.html" id="searchForm">
						<span class="shuru">
						<input id="search-input" type="text" name="name" id="name" value="" /></span>
						<span class="fa fa-search btn" aria-hidden="true" id="submitForm"></span>
					</form>
					<!-- 测试打开微信 -->
		    		<!-- <a href="weixin://connectToFreeWifi/?apKey=http%3A%2F%2Fmp.weixin.qq.com">打开微信</a> -->
		    </div>
	    </div>
	    <!-- 导航栏 -->	    
		<div id="list-header">
			<ul class="list-tb" id="channel-style">
		    	<li class="li-choose">首页</li>
		    	<li>电影</li>
		    	<li>电视剧</li>
		    	<li>动漫</li>
	    	</ul>
		</div>
		<!-- 广告轮播 -->
		<div class="banner">
	    	<div class="swiper-container no-hide">
                <div class="swiper-wrapper">
                 <c:forEach items="${pBanner}" var="list" varStatus="s"> 
                    <div class="swiper-slide" >
	                    	<a target="_blank" href="${list.linkUrl}">
	                    		<img src="${baseImgPath}${list.imgUrl}" alt="" />
	                    	</a>
                    	<p>
                    		<span class="p-title">${list.title}</span>
                            <span class="p-word">${list.summary}</span>
                    	</p>
                    </div>
                 </c:forEach>
                </div>
                <div class="swiper-pagination fenye"></div>
            </div>
	    </div>
	    <!-- 激情预告 -->
	    <div class="bd">
	    	<div class="t-title">
	    		<span>激情预告</span>
	    		<a href="${pageContext.request.contextPath }/wap/search.html?type=MOVIE_PREVUE">更多</a>
	    	</div>
	    	<ul class="list-ul">
	    		<c:forEach items="${moviePrevue}" var="list" varStatus="s">
			    		<li>
			    			<a href="${pageContext.request.contextPath }/wap/detail/show.html?seriesId=${list.id}&setNum=1">
				    			<img src="${baseImgPath}${list.poster}" alt="" />
				    			<span>${list.name}</span>
				    			<span>${list.description}</span>
			    			</a>
			    		</li>
	    		</c:forEach>
	    	</ul>
	    </div>
	    <!-- 卫视同步 -->
	    <div class="bd">
	    	<div class="t-title">
	    		<span>卫视同步</span>
	    		<a href="${pageContext.request.contextPath }/wap/search.html?type=TVPLAY_STARTV">更多</a>
	    	</div>
	    	<ul class="list-ul">
	    		<c:forEach items="${tvplayStartv}" var="list" varStatus="s">
		    		<li>	
	    				<a href="${pageContext.request.contextPath }/wap/detail/show.html?seriesId=${list.id}&setNum=1">
			    			<img src="${baseImgPath}${list.poster}" alt="" />
			    			<span>${list.name}</span>
			    			<span>${list.description}</span>
			    		</a>
			    	</li>
			    </c:forEach>
			 </ul>
		</div>
	    <!-- 日韩热播 -->
	    <div class="bd">
	    	<div class="t-title">
	    		<span>日韩热播</span>
	    		<a href="${pageContext.request.contextPath }/wap/search.html?type=TVPLAY_RIHAN">更多</a>
	    	</div>
	    	<ul class="list-ul">
	    		<c:forEach items="${tvplayRihan}" var="list" varStatus="s">
		    			<li>
			    			<a href="${pageContext.request.contextPath }/wap/detail/show.html?seriesId=${list.id}&setNum=1">
				    			<img src="${baseImgPath}${list.poster}" alt="" />
				    			<span>${list.name}</span>
				    			<span>${list.description}</span>
				    		</a>
			    		</li>
			    </c:forEach>
	    	</ul>
	    </div>
	    <!-- 美剧精选 -->
	    <div class="bd">
	    	<div class="t-title">
	    		<span>美剧精选</span>
	    		<a href="${pageContext.request.contextPath }/wap/search.html?type=MOVIE_OUMEI">更多</a>
	    	</div>
	    	<ul class="list-ul">
	    		<c:forEach items="${tvplayOumei}" var="list" varStatus="s">
			    		<li>
				    		<a href="${pageContext.request.contextPath }/wap/detail/show.html?seriesId=${list.id}&setNum=1">
				    			<img src="${baseImgPath}${list.poster}" alt=""  />
				    			<span>${list.name}</span>
				    			<span>${list.description}</span>
				    		</a>
			    		</li>
			    </c:forEach>
	    	</ul>
	    </div>
	    <!-- 佳片有约 -->
	     <div class="bd">
	    	<div class="t-title">
	    		<span>佳片有约</span>
	    		<a href="${pageContext.request.contextPath }/wap/search.html?type=MOVIE_JIAPIAN">更多</a>
	    	</div>
	    	<ul class="film-ul">
	    		<c:forEach items="${movieJiapian}" var="list" varStatus="s">
			    	<li>
			    		<a href="${pageContext.request.contextPath}/wap/detail/show.html?seriesId=${list.id}&setNum=1">
			    			<img src="${baseImgPath}${list.cover}" alt="" />
			    			<span>${list.name}</span>
			    			<span>${list.description}</span>
			    		</a>
			    	</li>
	    		</c:forEach>
	    	</ul>
	    	<!-- <ul class="fl">
	    		<li><a href="">科幻</a></li>
	    		<li><a href="">科幻</a></li>
	    		<li><a href="">科幻</a></li>
	    		<li><a href="">科幻</a></li>
	    		<li><a href="">科幻</a></li>
	    		<li><a href="">科幻</a></li>
	    		<li><a href="">科幻</a></li>
	    		<li><a href="">科幻</a></li>
	    	</ul> -->
	    </div>
	    <!-- 院线大片 -->
	    <div class="bd">
	    	<div class="t-title">
	    		<span>院线大片</span>
	    		<a href="${pageContext.request.contextPath }/wap/search.html?type=MOVIE_YUANXIAN">更多</a>
	    	</div>
	    	<ul class="film-ul">
	    		<c:forEach items="${movieYuanxian}" var="list" varStatus="s">
			    	<li>
			    		<a href="${pageContext.request.contextPath }/wap/detail/show.html?seriesId=${list.id}&setNum=1">
			    			<img src="${baseImgPath}${list.cover}" alt=""  />
			    			<span>${list.name}</span>
			    			<span>${list.description}</span>
			    			</a>
			    	</li>
	    		</c:forEach>
	    	</ul>	    	
	    </div>
	    <!-- 动漫剧场 -->
	     <div class="bd">
	    	<div class="t-title">
	    		<span>动漫剧场</span>
	    		<a href="${pageContext.request.contextPath}/wap/search.html?type=CARTOON">更多</a>
	    	</div>
	    	<ul class="list-ul">
	    		<c:forEach items="${cartoonHot}" var="list" varStatus="s">
			    	<li>
			    		<a href="${pageContext.request.contextPath }/wap/detail/show.html?seriesId=${list.id}&setNum=1">
			    			<img src="${baseImgPath}${list.poster}" alt=""  />
			    			<span>${list.name}</span>
			    			<span>${list.description}</span>
			    		</a>
			    	</li>
	    		</c:forEach>
	    	</ul>
	    </div>
	    
	    <!-- 页脚 -->
	    <div class="footer">
	    	<div class="footer-bd">
	    		<!-- <ul>
	    			<li><a href="#">关于</a></li>
	    			<li><a href="#">招聘</a></li>
	    			<li><a href="#">反馈</a></li>
	    			<li><a href="#">帮助</a></li>
	    			<li><a href="#">About Us</a></li>
	    		</ul> -->
	    		<p class="bq">
	    			Copyright © 2016 All Rights Reserved.
	    		</p>
	    	</div>
	    </div>
	    <script type="text/javascript" src="${pageContext.request.contextPath }/resources/wap/js/jquery-2.2.3.min.js" ></script>
	    <script type="text/javascript" src="${pageContext.request.contextPath }/resources/wap/js/bootstrap.min.js" ></script>
	    <script type="text/javascript" src="${pageContext.request.contextPath }/resources/wap/js/swiper.min.js" ></script>
	    <script type="text/javascript">
	    	$(document).ready(function(){	
	    		var bannerH=$('.banner').width()*0.565;
	    		var henH=$('.bd .list-ul li').width()*0.565;
	    		var shuH=$('.bd .film-ul li').width()*1.45;
	    		$('.banner img').height(bannerH);
	    		$('.bd .list-ul li img').height(henH);
	    		$('.bd .film-ul li img').height(shuH);


                var mySwiper = new Swiper ('.swiper-container', {
                   loop: true,
                   pagination : '.swiper-pagination',
                   paginationClickable :true,
                   autoplay : 4000,
                })                
	        }); 
	    	
	    </script>
	    <script type="text/javascript">
	   		$("#submitForm").click(function(){
	   			$("#searchForm").submit();
	   		});
	   		$("#channel-style li").bind("click",function(){
				$(".li-choose").removeClass("li-choose");
				$(this).addClass("li-choose");
				var choose = $(this).index();
				if (choose==0) {
					
				}else if(choose==1){
					window.location.href="${pageContext.request.contextPath }/wap/search.html?code=MOVIE";
				}else if(choose==2){
					window.location.href="${pageContext.request.contextPath }/wap/search.html?code=TVPLAY";
				}else if(choose==3){
					window.location.href="${pageContext.request.contextPath }/wap/search.html?code=CARTOON";
				}
	   		});    		
		</script>
</body>
</html>